<template>
  <div class="container3">
    <div id="myEchart3"></div>
    <center-Cmp-Frame :dialogVisible="dialogVisible" @handleClose="handleClose"/>
  </div>
</template>

<script>
// 引入js，不需要带后缀
import Sever from '@/api/selfApi'
import centerCmpFrame from './subpage/CenterCmpFrame'
const echarts = require('echarts')
export default {
  name: 'echartsTest3',

  components: {
    centerCmpFrame
  },
  data() {
    return {
      data: [],
      dialogVisible: false,
      descIcon: require('@/assets/icon/desc.png'),
      ascIcon: require('@/assets/icon/asc.png'),
    }
  },
  mounted() {
    this.initEchart('desc');
  },
  methods: {
    handleClose(){
      this.dialogVisible = false
    },
    async initEchart(order) {
      let _this = this
      //请求后台返回数据
      try {
        //请求后台接口
        let res = null;
        if (order == 'desc') {
          res = await Sever.analyse.getZgbmScoreDesc({
            //请求参数(this.depCode是全局变量)
            dep_code: this.depCode
          })
        } else if (order == 'asc') {
          res = await Sever.analyse.getZgbmScoreAsc({
            //请求参数
            dep_code: '450000'
          })
        }
        //取值赋给name和value
        let arr = res.map(item => {
          return {
            name: item.JGSY_NAME,
            score: item.SUM_FS,
            jgsy_code: item.JGSY_CODE,
            pg_id: item.JGBZ_PG_ID
          }
        })
        //赋值给变量
        this.data = arr
      } catch (error) {
        console.log(error)
      }
      //初始化echarts组件
      const myChart = echarts.init(document.getElementById('myEchart3'))
      myChart.clear()
      const option = {
        title: {
          show: true,
          text: '评估分数排序', //主标题文本
          x: 'center', //水平安
          y: '10px', //垂直
          textStyle: {
            fontSize: 20,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#333'
          }
        },
        grid: {
          left: '30px',
          top: '50px',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          itemGap: 10,
          itemSize: 25,
          left: 'right',
          top: '5px',
          feature: {
            myTool1: {
              show: true,
              title: '低分',
              icon: 'image://' + this.ascIcon,
              onclick: function () {
                _this.initEchart("asc");
              }
            },
            myTool2: {
              show: true,
              title: '高分',
              icon: 'image://' + this.descIcon,
              onclick: function () {
                _this.initEchart("desc");
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: [
          {
            dimensions: ['name', 'score'],
            source: this.data
          },
          {
            transform: {
              type: 'sort',
              config: { dimension: 'score', order: 'asc' }
            }
          }
        ],
        xAxis: {
          position: "top",
          "axisLine": {       //x轴
            "show": true
          },
          "splitLine": {     //网格线
            "show": false
          }
        },
        yAxis: {
          type: 'category',
          //升序
          inverse: true,
          "axisTick": {       //y轴刻度线
            "show": false
          },
          "splitLine": {     //网格线
            "show": false
          },
          axisLabel: {
            margin: 20,
            // 必须使用formatter，配合rich使用
            formatter: (params, index) => {
              return index + 1
            },
            color: '#fff',
            width: 30,
            height: 30,
            lineHeight: 30,
            align: "center",
            verticalAlign: "middle",
            backgroundColor: '#2f89cf',
            borderRadius: 15,

          }
        },
        series: {
          type: 'bar',
          encode: { y: 'name', x: 'score' },
          barWidth: '35%', //柱子宽度
          barGap: 1, //柱子之间间距
          label: {
            show: true,
            formatter: '{b}'
          },
          itemStyle: {
            normal: {
              color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5,
            }
          }
        }
      }
      myChart.setOption(option)
      myChart.on('click', function (param) {
        console.log(param.data.jgsy_code);
				console.log(param.data.name);
				console.log(param.data.pg_id);
        _this.dialogVisible = true;
      });

      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
.container3 {
  width: 100%;
  height: 100%;
}
#myEchart3 {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
